import React, { useEffect, useState } from 'react';
import { Button,Form, Input, message } from 'antd';
import {addArticleApi,updateArticleApi} from '@/api/requestApi'
import { useDispatch } from 'react-redux';
import { fetchArticleList } from '@/store/modules/articleSlice';
const ArticleModal: React.FC = ({isEdit,currentData,handleCancel}) => {
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  };
  
  const validateMessages = {
    required: '${label} is required!',
  };

  // 点击编辑按钮,显示弹框,数据需要做回显
  useEffect(()=>{
    if(isEdit){ // 编辑  数据回显
      form.setFieldsValue({ // 注意:我这里使用是article:{title:值...}
        // article:{
        //   ...currentData,
        //   // ...tagList,
        //   // ...categoryList,
        //   // ...content
        // }

        article:currentData
      })

    }else{ // 新增  清空数据
      form.resetFields()
    }

  },[isEdit,currentData])
  
  const onFinish = async(values: any) => {
    // 判断是新增还是编辑 
    console.log(values,'form表单数据');
    values.article.tagList = [values.article.tagList]
    values.article.categoryList = [values.article.categoryList]
    if(isEdit){ // 表示的是编辑操作  需要两个参数 当前数据的id  以及 新的文章数据
      // console.log(values,'处理之后的数据')
      try {
        await updateArticleApi(currentData.id,values.article)
        message.success('编辑文章成功')
        handleCancel() // 关闭模态框
        dispatch(fetchArticleList())  // 重新获取表格数据
      } catch (error) {
        message.error(error.response.data.message)
      }
    } else {  // 新增操作
      values.article.authorId = 47529555
      try {
        // 文章的添加接口
        const res = await addArticleApi(values.article)
        if(res && res.status === 200){
          message.success('添加文章成功')
          handleCancel()  // 关闭模态框
          dispatch(fetchArticleList())
        }
      } catch (error) {
        message.error(error.response.data.message)
      }
    }

    
    // values.article.authorId = 47529555
    // values.article.tagList = [values.article.tagList]
    // values.article.categoryList = [values.article.categoryList]

    // try {
    //   // 文章的添加接口
    //   const res = await addArticleApi(values.article)
    //   if(res && res.status === 200){
    //     message.success('添加文章成功')
    //     handleCancel()  // 关闭模态框
    //   }
    // } catch (error) {
    //   message.error(error.response.data.message)
    // }

  };

  return (
    <div>
        <Form
          {...layout}
          name="nest-messages"
          onFinish={onFinish}
          style={{ maxWidth: 600 }}
          validateMessages={validateMessages}
          form={form}
        >
          <Form.Item name={['article', 'title']} label="文章标题" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name={['article', 'tagList']} label="文章标签" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name={['article', 'categoryList']} label="文章分类" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name={['article', 'content']} label="文章内容" rules={[{ required: true }]}>
            <Input.TextArea />
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              {isEdit ? '编辑' : '新增'}
            </Button>
          </Form.Item>
        </Form>
    </div>
  );
};

export default ArticleModal;